<!DOCTYPE html>
<html>
<!--
1.父组件向子组件传递值得时候，遵循单向数据流的原则，子组件不能修改父组件的值；子组件可以通过克隆对象进行值得修改
2.父组件向子组件传递值通过属性的方式进行传递，如果属性有带：，则里面的是JS表达是，如果没有：,则是普通的字符串
3.子组件向父组件传递的时候通过事件监听的方式进行传递
-->
<head>
	<title>父子组件值传递</title>
	<script type="text/javascript" src="./vue.js"></script>
</head>
<body>	
	<div id="app">
		<counter :count="0" @change="inc"></counter>
		<counter :count="1" @change="inc"></counter>
		<div>total:{{total}}</div>
	</div>
	<script>
		var counter = {
			props : ['count'],
			data : function() {
				return {
					number : this.count
				}
			},
			template : '<div @click="handerClick">{{number}}</div>',
			methods : {
				handerClick : function() {
					this.number += 2;
					this.$emit('change' , 2);
				}
			}
		};

		var app = new Vue({
			el : '#app' ,
			components : {
				'counter' : counter
			},
			data : {
				total : 1
			},
			methods : {
				inc : function(step) {
					this.total += step;
				}
			}
			
		});
	</script>
</body>
</html>